<template>
    <view>
        <view class="withdrawal">
            <view class="title">Amount</view>
            <view class="momeyList">
                <view
                    v-for="item in list"
                    :key="item.type"
                    class="money-item"
                    :class="{ active: item.type == active }"
                    >{{ item.money }} {{ item.unit }}</view
                >
            </view>
            <view class="title">Withdraw Method</view>
            <!-- 提现方式 -->
            <view class="withdrawal-method">
                <view class="method-item">
                    <view class="method-name">Bank Card</view>
                    <uni-icons
                        v-if="cardType == 1"
                        type="checkbox-filled "
                        size="20"
                        color="#FC721A"
                    ></uni-icons>
                    <uni-icons
                        v-else
                        type="circle"
                        size="20"
                        color="#E5DEDB"
                    ></uni-icons>
                </view>
                <view class="method-item">
                    <view class="method-name">Mobile Wallet（Not added）</view>
                    <view class="noCard">Go to add</view>
                </view>
            </view>
            <!-- <u-radio-group
                v-model="cardType"
                placement="column"
                iconPlacement="right"
            >
                <u-radio
                    activeColor="#FC721A"
                    labelColor="#171412"
                    inactiveColor="#E5DEDB"
                    label="Bank Card"
                    :value="1"
                ></u-radio>
                <u-radio
                    activeColor="#FC721A"
                    inactiveColor="#E5DEDB"
                    labelColor="#171412"
                    label="Mobile Wallet（Not added）"
                    :value="2"
                ></u-radio>
            </u-radio-group> -->
            <view class="title">Bank Card </view>
            <u-cell-group :border="false">
                <u-cell isLink :border="false" @click="show = true">
                    <template slot="icon">
                        <image
                            slot="icon"
                            src="@/static/home/map.png"
                            class="iconImg"
                        />
                    </template>
                    <view slot="title" class="u-slot-title">
                        <view class="cardCode">**** **** 1234</view>
                        <view class="name">Bank of America</view>
                    </view>
                </u-cell>
            </u-cell-group>
        </view>
        <bottomBtn text="Withdraw">
            <!-- 底部提现说明 -->
            <view class="bottomTip">
                <view class="tip"><text>*</text> Withdrawal instructions:</view>
                <view class="value">
                    Funds arrive within 24 hours(business days)
                </view>
                <view class="value">Limited to 2 withdrawals per day</view>
            </view>
        </bottomBtn>
        <!-- 选择银行卡 -->
        <qianziyu-select
            :show="show"
            type="radio"
            popupTitle="Select bank card"
            name="houseName"
            :dataLists="dataLists"
            :showSearch="false"
            placeholder="输入酒店民宿名称搜索"
            @cancel="show = false"
            @submit="getHouseData"
        />
    </view>
</template>
<script>
export default {
    data() {
        return {
            list: [
                { money: "1000", unit: "Egp", type: 1 },
                { money: "3000", unit: "Egp", type: 2 },
                { money: "5000", unit: "Egp", type: 3 },
            ],
            active: 1,
            cardType: 1,
            show: false,
            dataLists: [
                {
                    label: "Bank of America",
                    value: "1234567890",
                },
                {
                    label: "Mastercard",
                    value: "0987654321",
                },
            ],
        };
    },
    methods: {
        selectSearch(e) {
            console.log(e);
        },
        getHouseData(e) {
            console.log(e);
        },
    },
};
</script>
<style lang="css">
.withdrawal {
    padding: 0 32rpx 160rpx;
    .title {
        font-weight: bold;
        font-size: 32rpx;
        color: #1c120d;
        line-height: 56rpx;
        padding: 70rpx 0 28rpx;
    }
    .momeyList {
        display: flex;
        justify-content: space-between;
        .money-item {
            text-align: center;
            font-weight: 500;
            font-size: 28rpx;
            color: #171412;
            height: 120rpx;
            background: #f7f7f7;
            border-radius: 16rpx;
            line-height: 120rpx;
            width: 30%;
        }
        .active {
            background: #fc721a;
            color: #fff;
        }
    }
    .iconImg {
        width: 74rpx;
        height: 36rpx;
    }
    .u-slot-title {
        .cardCode {
            font-weight: 500;
            font-size: 32rpx;
            color: #171412;
            line-height: 48rpx;
        }
        .name {
            font-weight: 400;
            font-size: 28rpx;
            color: #8c705e;
            line-height: 42rpx;
        }
    }
    .u-cell__body {
        padding: 0;
    }
    .withdrawal-method {
        .method-item {
            background: #f7f7f7;
            border-radius: 16rpx;
            font-weight: 500;
            font-size: 28rpx;
            color: #171412;
            line-height: 42rpx;
            padding: 24rpx 30rpx;
            margin-bottom: 30rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .noCard {
                font-weight: 400;
                font-size: 28rpx;
                color: #fc721a;
                width: 176rpx;
                line-height: 56rpx;
                background: #f7f7f7;
                border-radius: 198rpx;
                border: 2rpx solid #fc721a;
                text-align: center;
            }
        }
    }
}
.bottomTip {
    font-size: 28rpx;
    color: #999999;
    line-height: 40rpx;
    margin-bottom: 80rpx;
    .tip {
        text {
            color: #fc721a;
            font-size: 30rpx;
        }

        color: #444444;
    }
    .value {
        position: relative;
        padding-left: 24rpx;
        &::after {
            content: "";
            position: absolute;
            width: 8rpx;
            height: 8rpx;
            border-radius: 50%;
            background: #999999;
            left: 0;
            top: 16rpx;
        }
    }
}
</style>
